import { Typography, Image } from "antd"
import React from "react"

const { Title, Text } = Typography

const SKUInfo = (props: any) => {
    const { activeTask } = props
    return (
        <div className="text-center">
            <Title level={4}>
                {activeTask?.skuMainData?.skuBarcode?.barcodes}
            </Title>
            <div className="pb-3">
                <Text
                    type="secondary"
                    ellipsis={{ tooltip: true }}
                    className="px-4"
                >
                    {activeTask?.skuMainData?.skuName}
                </Text>
            </div>
            <Image
                width={100}
                height={100}
                src={activeTask?.skuMainData?.skuAttribute?.imageUrl}
                fallback=""
            />
            <div className="d-flex justify-center items-center">
                <Title level={3} className="pt-2">
                    {activeTask?.operationTaskDTOS[0]?.requiredQty}
                </Title>
            </div>
        </div>
    )
}

export default SKUInfo
